<template>
	<view class="content">
		<!-- <liu-easy-map ref="liuEasyMap" :centerLat="'36.05709'" :centerLng="'103.82538'" :scale="14"
		            :markerData="markerData" :polygons="polygons" @clickMarker="markerClick"></liu-easy-map> -->
		<map style="width: 100%; height: 600rpx;" ref="map" scale='18' :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		<cover-view class="selectMap">
			<!-- <cover-view style="width: 90%;margin: 0 auto;border-radius: 30rpx;">
				<uni-easyinput prefixIcon="search" class="searchMapInput"  v-model="mapTip" placeholder="输入要搜索的内容" @iconClick="iconClick"></uni-easyinput>
			</cover-view> -->
			<cover-view class='cover-input' @click='tapInput'>
				<cover-view class='cover' :class="inputModel ? 'text1': 'text'">{{inputInfo}}</cover-view>
				<input class='input' v-model='inputModel'  :focus='inputFocus' @blur='blurInput'></input>
			</cover-view>
			
			<cover-view class="searchItems">
				<cover-view class="searchItem" v-for="i in 7" :key='i'>
					<cover-view class="mapAdress">
						<cover-image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" :src="$getImageSrc('ic_dw2.png')" mode=""></cover-image>
						<cover-view class="tip-info">
							<cover-view class="tip">天府广场</cover-view>
							<cover-view class="info ellipsis">成都市青羊区-人民南路一段86号</cover-view>
						</cover-view>
					</cover-view>
					<cover-image class="secelctAddress" v-if="i===0" :src="$getImageSrc('quanSelect.png')" mode=""></cover-image>
				</cover-view>
				<cover-view style="height: 60rpx;width:100%;"></cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  mapTip:'',
			  inputFocus: false, // input 框的focus状态
			  inputModel: '', // input 框的输入内容
			  inputInfo: '输入要搜索的内容',
			  // longitude: 104.065837, // 初始经度
			  // latitude: 30.657349, // 初始纬度
			  // lng:104.14067,lat:30.656279
			  longitude: 104.14150,  // 初始经度
			  latitude: 30.656279,  // 初始纬度
			  scale: 16, // 缩放级别
			  markers: [{ // 标记点
				id: 1,
				latitude: 30.656279,
				longitude: 104.14067,
				title: '标记点'
			  }]
			}
		},
		onLoad() {
			uni.getLocation({
				type: 'wgs84',
				success:  (res) => {
					console.log('当前经纬度信息：' , res);
					this.longitude = res.longitude
					this.latitude = res.latitude
					console.log(this)
					this.myAmapFun.getRegeo({
						// location: `${res.latitude},${res.longitude}`,
						success:(data) => {
							console.log('当前位置信息：' , data);
						},
						fail: (info) => {
							//失败回调
							console.log(info)
						}
					})
					// this.$refs.map.moveToLocation({
					// 	longitude:res.longitude,
					// 	latitude:res.latitude
					// })
				}
			})
            
			 // uni.reverseGeocode({
			 //    point: {latitude: 30.656279,longitude: 104.14067},
			 //    success: function (reverseRes) {
			 //      const address = reverseRes.address;
			 //      console.log('实时地址:', address);
			 //      console.log('================:', reverseRes);
			 //      // 更新UI或者其他逻辑
			 //    },
			 //    fail: function (err) {
			 //      console.error('获取地址失败:', err);
			 //    }
			 //  });
			 
			
			// 打开地图， 选择位置
			// uni.chooseLocation({
			// 	success: res => {
			// 		console.log(res);
			// 		console.log('位置名称：' + res.name);
			// 		console.log('详细地址：' + res.address);
			// 		console.log('纬度：' + res.latitude);
			// 		console.log('经度：' + res.longitude);
			// 	}
			// });
		},
		onReady() {
			
		},
		methods: {
          iconClick(){
			  console.log('----------123click')
		  },
		  tapInput(){
			this.inputFocus = true
			this.inputInfo = ''
		  },
		  blurInput(e){
			  console.log('---------', e , this.inputModel)
			  this.inputInfo = e.detail.value
			  this.inputFocus = false
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height: 100%;
		overflow: hidden;
		background: #eee;
		.selectMap{
			width: 100%;
			height: calc(100% - 580rpx);
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			z-index: 999999;
			position: absolute;
			bottom: 0rpx;
			// .searchMapInput{
			// 	position: relative;
			// 	width: 92%;
			// 	margin: 0 auto 0;
			// 	height: 88rpx;
			// 	line-height: 88rpx;
			// 	border: 1px solid #eee;
			// 	border-radius: 20rpx;
			// 	background: #fff;
			// 	text-indent: 40rpx;
			// 	background: #FFFFFF;
			// 	box-shadow: 0rpx 4rpx 24rpx 2rpx rgba(0,0,0,0.08);
			// 	border-radius: 20rpx 20rpx 20rpx 20rpx;
			// 	border: 1rpx solid #02B1AA;
			// 	z-index: 999;
			// }
			.cover-input{
				width: 92%;
				margin: 0 auto 0;
				height: 88rpx;
				line-height: 88rpx;
				border: 1px solid #eee;
				border-radius: 20rpx;
				background: #fff;
				text-indent: 40rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 24rpx 2rpx rgba(0,0,0,0.08);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 1rpx solid #02B1AA;
				position: relative;
				z-index: 9;
				.cover{
					height: 88rpx;
					line-height: 88rpx;
					text-indent: 5%;
					width: 90%;
					margin: 0 auto;
				}
				.text{
					color: #999;
				}
				.text1{
					color: #2A2B2B;
				}
				.input{
					visibility: hidden;
					position: absolute;
					width: 90%;
					height: 88rpx;
					line-height: 88rpx;
					top: 0;
					left: 5%;
				}
			}
			.searchItems{
				width: 100%;
				background: #fff;
			    height: calc(100% - 48rpx);
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
				margin-top: -40rpx;
				overflow: auto;
				padding-top: 60rpx;
				.searchItem{
					width: 90%;
					margin: 0 auto;
					border-bottom: 1px solid #eee;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					height: 100rpx;
					.mapAdress{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 24rpx;
						width: calc(100% - 50rpx);
						.tip-info{
							width: calc(100% - 90rpx);
							.tip{
								font-size: 30rpx;
								font-weight: 800;
								line-height: 40rpx;
							}
							.info{
								color: #AEB3B3;
								width: 80%;
							}
						}
					}
					.secelctAddress{
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	
</style>
